<template>
    <div class="zhipu-size">
        <editor-title title="生成尺寸" required />

        <div class="grid grid-cols-3 gap-3">
            <div
                v-for="(item, index) in pictureSize.lists"
                :key="index"
                class="picture-size"
                :class="{ 'active': value == item.scale }"
                @click="value = item.scale"
            >
                <div class="flex justify-center items-center mt-[15px] h-[20px]">
                    <div class="rect" :class="item.class"></div>
                </div>
                <div class="size-scale text-base text-[#798696] dark:text-white mt-[6px]">
                    {{ item.scale }}
                </div>
                <!-- <div class="size-name text-xs text-[#798696] dark:text-white mt-[4px]">
                    {{ item.name }}
                </div> -->
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useVModels } from '@vueuse/core'
import editorTitle from '../editor-title.vue'

const emits = defineEmits<{
    (event: 'update:modelValue', value: string): void
}>()

const props = withDefaults(
    defineProps<{
        modelValue: any;
    }>(),
    {}
)

const { modelValue: value } = useVModels(props, emits)

const pictureSize = reactive({
    lists: [
        { name: '720x480',  scale: '720x480', class: 'w-[20px] h-[20px]' },
        { name: '1024x1024',  scale: '1024x1024', class: 'w-[15px] h-[20px]' },
        { name: '1280x960',  scale: '1280x960', class: 'w-[20px] h-[15px]' },
        { name: '960x1280',  scale: '960x1280', class: 'w-[13px] h-[20px]' },
        { name: '1920x1080',  scale: '1920x1080', class: 'w-[16px] h-[12px]' },
        { name: '1080x1920',  scale: '1080x1920', class: 'w-[13px] h-[16px]' },
        { name: '2048x1080',  scale: '2048x1080', class: 'w-[20px] h-[12px]' },
        { name: '3840x2160',  scale: '3840x2160', class: 'w-[20px] h-[12px]' },
    ]
})
</script>

<style scoped lang="scss">
.picture-size {
    width: 100px;
    height: 80px;
    text-align: center;
    cursor: pointer;
    user-select: none;
    background-color: var(--el-bg-color-page);
    border: 1px solid var(--el-border-color-lighter);
    border-radius: 4px;
    transition: all 0.5s;
    .rect {
        background-color: #959da8;
        border: 2px solid #959da8;
        border-radius: 2px;
    }

    &:hover,
    &.active {
        background-color: var(--el-color-primary-light-9);
        border: 1px solid var(--el-color-primary);
        .rect {
            background-color: var(--el-color-primary);
            border: 2px solid var(--el-color-primary);
        }
        .size-scale,
        .size-name {
            color: var(--el-color-primary);
        }
    }
}
</style>
